<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
	<head>
		<base href="<%=basePath%>">
		<title>使用ajax局部刷新出数据</title>
		<script type="text/javascript" src="jquery/jquery-3.6.0.js"></script>
		<script>
            $(function () {
                $("#subBtn").click(function () {

                    $.ajax({
                        url: "user",
                        data: {
                            name: $("#name").val(),
                            operation: "getUserList",
                        },
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            //console.log(data);
                            //需要返回该姓名对应的这条记录
                            var html = "";

                            $.each(data, function (i, n) {
                                html += '<tr>';
                                html += '<td>' + n.id + '</td>';
                                html += '<td>' + n.name + '</td>';
                                html += '<td>' + n.password + '</td>';
                                html += '</tr>';
                            })

                            $("#userBody").html(html);
                        }
                    })
                })
            })
		</script>
	</head>
	<body>
		<form>
			<label for="name">名称:</label>
			<input name="name" id="name">
			<input type="button" value="查询" id="subBtn">
			<table border="1px solid cadetblue" cellpadding="0" width="200px">
				<thead>
				<tr>
					<th>id</th>
					<th>name</th>
					<th>password</th>
				</tr>
				</thead>
				<tbody id="userBody">


				</tbody>
			</table>
		</form>
	</body>
</html>